<template>
    <div class="aside">
        <el-menu :default-active="active" router active-text-color="#0067d6">
            <el-menu-item index="index" :route="{ path: '/main' }">
                <el-icon>
                    <Histogram />
                </el-icon>
                <span>数据看板</span>
            </el-menu-item>
            <el-menu-item index="goods" :route="{ path: '/main/goods' }">
                <el-icon>
                    <Goods />
                </el-icon>
                <span>商品管理</span>
            </el-menu-item>
            <el-menu-item index="category" :route="{ path: '/main/category' }">
                <el-icon>
                    <Files />
                </el-icon>
                <span>分类管理</span>
            </el-menu-item>
            <el-menu-item index="orders" :route="{ path: '/main/orders' }">
                <el-icon>
                    <Document />
                </el-icon>
                <span>订单管理</span>
            </el-menu-item>
            <el-menu-item index="user" :route="{ path: '/main/user' }" v-if="userStore.userinfo.type===2">
                <el-icon>
                    <User />
                </el-icon>
                <span>用户管理</span>
            </el-menu-item>
            <el-menu-item index="setting" :route="{ path: '/main/setting' }">
                <el-icon>
                    <Setting />
                </el-icon>
                <span>网站设置</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import { Document, Setting, User, Goods, Histogram, Files } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
import {useUserStore} from '../stores/useUser'

const userStore =useUserStore()

const route = useRoute()

const active = ref('index')

const setActive = (path) => {

    if (path === '/main/goods') {
        active.value = 'goods'
    } else if (path === '/main/orders') {
        active.value = 'orders'
    } else if (path === '/main/user') {
        active.value = 'user'
    } else if (path === '/main/setting') {
        active.value = 'setting'
    } else if (path === '/main/category') {
        active.value = 'category'
    } else if (path == '/main') {
        active.value = 'index'
    }
}

setActive(route.path)

//监听路由变化
watch(() => route.path, (newVal) => {

    setActive(newVal)
})


</script>

<style scoped lang='less'>
.aside {
    width: 200px;
    height: calc(100vh - 90px);
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    background-color: #fff;
    overflow: hidden;
    margin: 15px 0;
}

:deep(.el-menu) {
    border: none;
}
</style>